<template>
  <div class="flex flex-col justify-center items-center">
    <img src="@/assets/logo.svg" class="w-50 h-50 mt-20" alt="" srcset="">
    <van-cell-group class="mt-10">
      <van-field v-model="data.username" label="Username" placeholder="username" />
    </van-cell-group>
    <van-cell-group class="mt-10">
      <van-field v-model="data.password" label="Password" placeholder="password" />
    </van-cell-group>

    <van-button style="margin-top: 20px;" type="primary" @click="login">
      Login/Register
    </van-button>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed } from 'vue';
import { useStore } from '@/stores/store';
import { useRoute, useRouter } from 'vue-router';
import { Field, CellGroup } from 'vant';

/**
* 仓库
*/
const store = useStore();
/**
* 路由对象
*/
const route = useRoute();
/**
* 路由实例
*/
const router = useRouter();
//console.log('1-开始创建组件-setup')
/**
* 数据部分
*/
const data = reactive({
  username: '',
  password: '',
})

const login = () => {
  
}
onBeforeMount(() => {
  //console.log('2.组件挂载页面之前执行----onBeforeMount')
})
onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
})
watchEffect(() => {
})
// 使用toRefs解构
// let { } = { ...toRefs(data) } 
defineExpose({
  ...toRefs(data)
})

</script>
<style scoped lang='less'></style>